import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Upload, Select, Space, notification, Switch } from 'antd';
import "../../Index/CXY/styles/consultedit.scss"
import { PlusOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import * as service from "../../../api/System"
interface Props {

}
const { TextArea } = Input;
function SystemSwiperEdit(props: Props) {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [condition, setCondition] = useState<boolean>()
    var location = useLocation()
    const [form] = Form.useForm()

    useEffect(() => {
        if (location.state.type == "edit") {
            form.setFieldsValue(location.state.row)
        }
        console.log(location.state.row);

    }, [])
    let time = new Date()
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // console.log(location.state.row.id);
        if (location.state.type == "edit") {
            service.swiper_update({
                carouselId: location.state.row.carouselId,
                carouselName: values.carouselName,
                carouselPicture: "https://image.16pic.com/00/93/59/16pic_9359773_s.png?imageView2/0/format/png",
                // line: values.line,
                carouselTime: time,
                journalName: "李明明",
                carouselState: values.carouselState
            }).then((res) => {
                console.log(res);
                notification.success({
                    placement: "top",
                    message: "编辑成功！"
                })
                navigate("/index/system-swiper")
            })
        } else {
            service.swiper_add({
                carouselName: values.carouselName,
                carouselPicture: "https://image.16pic.com/00/93/59/16pic_9359773_s.png?imageView2/0/format/png",
                // line: values.line,
                carouselTime: time,
                journalName: "李明明",
                carouselState: values.carouselState
            }).then((res) => {
                console.log(res);
                notification.success({
                    placement: "top",
                    message: "新增成功！"
                })
                navigate("/index/system-swiper")
            })
        }
    };


    const back = () => {
        navigate(-1)
    }
    // var handelChange = (e: any) => {
    //     console.log(e.target.files[0]);
    //     // 将文件对象转换为base64编码后的字符串
    //     // FileReader专门负责读取文件内容，转换为其他格式
    //     var reader = new FileReader();
    //     reader.readAsDataURL(e.target.files[0])
    //     reader.onload = function(){
    //         console.log(this.result);
    //         //this.result 拿到的是所选中的文件的全部内容(以base64编码格式显示的字符串)
    //         // setImg('sdfsdfsdfsdf')
    //         form.setFieldValue('img',this.result);
    //     }
    // }
    const changeCondition = (row: any, checked: any) => {
        setCondition(checked)
        console.log(checked);
        if (location.state.type == "edit") {
            service.swiper_condition({ carouselId: row.carouselId, carouselState: checked }).then((res1: any) => {
                console.log(res1);
                if (checked == true) {
                    notification.success({
                        placement: "top",
                        message: "已启用！"
                    })
                } else {
                    notification.success({
                        placement: "top",
                        message: "已禁用！"
                    })
                }
            })
        }
    };
    return (
        <div className='consultedit'>
            <h4>轮播图管理</h4>
            <h5>轮播图信息</h5>
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                onFinish={onFinish}
            >
                <Form.Item
                    label="carouselId"
                    name="carouselId"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="轮播图标题"
                    name="carouselName"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="操作人"
                    name="journalName"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>

                <Form.Item label="轮播图片" valuePropName="carouselPicture">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>上传图片</div>
                        </div>
                    </Upload>
                </Form.Item>
                {/* <Form.Item label="链接" name="line">
                    <Input placeholder='请输入' />
                </Form.Item> */}
                <Form.Item
                    label="操作时间"
                    name="carouselTime"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item label="轮播图状态" valuePropName="checked" name="carouselState">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(checked) => { changeCondition(location.state.row, checked) }} />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
                    <Space>
                        <Button style={{ marginTop: 20 }} type="primary" htmlType="submit">
                            发布
                        </Button>
                        <Button onClick={() => { back() }} style={{ marginTop: 20 }} type="default">
                            返回
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    );
}

export default SystemSwiperEdit;